<template>
  <div class="wrapper">


  <swiper :options="swiperOption" v-if="slider && slider.length">
    <!-- slides -->
    <swiper-slide v-for="item in slider":key="item.id">
      <img :src="item.imgUrl" alt="">
    </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination" ref="swiper"></div>
  </swiper>
  </div>
</template>

<script>
  export default {
    name: 'carrousel',
    data() {
      return {
        swiperOption: {
          pagination: {
            el: '.swiper-pagination',
          },

          notNextTick: true,
          autoplay: {
            disableOnInteraction: false,
          },
          loop:true
        },
      }

    },
    props:{
      slider:{
        type:Array,
        default:[]
      }
    },
    components:{
    }
  }
</script>

<style lang="stylus" scoped>
  .wrapper >>>.swiper-pagination-bullet-active
    background-color #fff
  .wrapper >>>.swiper-pagination-bullet
    width 5px
    height 5px
  .wrapper
    position:relative
    overflow hidden
    height 0px
    background:#FFFFEE
    padding-bottom 31.6%
   img
     width:100%
</style>
